<html>
<head>
  <title>Your Snippets</title>
  <script src="lib/jquery-1.4.min.js"></script>
  <script src="lib/jquery.json-2.2.min.js"></script>
  <script src="lib/chrome_ex_oauthsimple.js"></script>
  <script src="lib/chrome_ex_oauth.js"></script>
  <script>
    // Create the backends namespace
    var backends = {};
  </script>
  <script src="js/backends/snipbin.js"></script>
  <script src="js/backends/googledocs.js"></script>
  <script src="js/dump.js"></script>
  <style>
    BODY {
      background-color: rgb(240, 240, 240);
      background-image: url(img/backgrad.png), url(img/paper_pile_2.jpg);
      background-repeat: repeat-x, no-repeat;
      background-position: top left, bottom right;
    }

    /* page header */
    h1.snippage-title {
      font-size: 20px;
      border: 1px solid white;
      font-family: sans-serif;
      text-align: center;
      padding: 0.2em 0;
      margin: 0.5em auto;
    }

    h1.snippage-title:hover,
    DIV.snippet-comment:hover {
      cursor: pointer;
      background-color: #e3e9ff;
      border: 1px solid #68e;
      -webkit-border-radius: 3px;
    }

    .snippage-title-input {
      font-size: 22px;
      font-weight: bold;
      padding: 0.2em 0;
      border: 1px solid #68e;
      width: 100%;
      margin: 0.5em auto;
      text-align: center;
    }

    /* paragraphs */
    .snippet-paragraph {
      font-size: 11px;
      font-family: sans-serif;
      margin-top: 0;
      margin-bottom: 0;
    }

    .snippet-no-snippet-placeholder {
      text-align: center;
      margin: 1em auto;
    }

    /* container styles */
    .snippet-container,
    .snippage-header {
      background-color: #fff;
      border: 1px solid #aaa;
      -webkit-border-radius: 3px;
      -webkit-box-shadow: 3px 3px 3px rgb(210, 210, 210);
      padding: 0.3em;
      margin: 0.3em;
      clear: both;
    }

    /* snippet styles */
    .snippet-discard {
      width: 24px;
      height: 24px;
      background: url('img/dump_trash.png');
      float: right;
    }

    .snippet-discard-all {
      float: right;
    }

    .snippet-discard:hover {
      background: url('img/dump_trash_hover.png');
      cursor: pointer;
    }

    .snippet-contents {
      min-height: 26px;
    }

    .snippet-controls {
      background-color: rgb(242, 248, 255);
      border: 1px solid rgb(192, 218, 255);
      -webkit-border-radius: 2px;
      padding: 0.2em;
      margin-top: 0.2em;
      font-size: 11px;
      font-family: sans-serif;
      clear: both;
    }

    .snippet-from {
      margin-left: 0.2em;
      padding-left: 20px;
      min-height: 16px;
      background: url('img/dump_source.png') no-repeat top left;
    }

    .snippet-comment-box {
      background: url('img/dump_comment.png') no-repeat top left;
      padding-left: 18px;
      margin-left: 0.2em;
      min-height: 16px;
    }

    .snippet-comment {
      font-size: 11px;
      font-family: sans-serif;
      width: 90%;
      margin: 0.2em 0;
      padding-left: 2px;
      border: 1px solid rgb(242, 248, 255);
    }
  </style>
</head>
<body>
<div class="snippage-header">
  <p class="snippet-paragraph">
    Review all the snippets you have collected so far.
  </p>
  <h1 class="snippage-title"></h1>

  <div class="snippet-share">
    <div class="snippet-discard-all snippet-paragraph">
      <a href="#">
        Clear all snippets
      </a>
    </div>
    <p class="snippet-paragraph">
      <span style="vertical-align:middle">
        <img src="img/share.png" style="vertical-align:middle">Save this snippets online to:
      </span>
      <span id="snippet-backends"></span>
      <span id="snippet-message" style="vertical-align: middle" class="snippet-paragraph"></span>
    </p>
  </div>
</div>
<div id="snippet-dump"></div>
</body>
</html>
